<template>
	<view>
		<!-- <view class="card">
			<view class="line">
				<view class="img"></view>
				<view class="">
					<view class="">已完成</view>
					<view class="num">订单已完成</view>
				</view>
			</view>
		</view> -->

		<view class="info">
			<view class="info_box">
				<view class="image">
					<img :src="list.image" alt="" style="width: 100%;height: 100%;" />
				</view>
				<view class="title">

					<view class="name">{{list.storeName}}</view>
					<!-- <view class="price">{{list.totalPrice}}</view> -->
				</view>
			</view>
			<view class="actually">
				<view class="">{{$t('mail.product.actual-payment')}}:</view>
				<view class="price">{{list.totalPrice}}</view>
			</view>
		</view>

		<view class="card_detail">
			<span class="tips">{{$t('order.detail')}}</span>
			<view class="txt_btn">
				<view class="tit">
					<view class="txt_left">{{$t('order.no')}}</view>
					<view class="">{{list.orderId}}</view>
				</view>
				<button type="primary" size="mini" id="order" @click="copy">{{$t('public.copy-button')}}</button>
			</view>

			<view class="tit">
				<view class="txt_left">{{$t('order.place-data')}}</view>
				<view class="">{{list.payTime}}</view>
			</view>
			<!-- <view class="tit">
				<view class="txt_left">1313</view>
				<view class="">12312313</view>
			</view> -->
		</view>


		<view class="card_detail" v-if="successInfo == 1">
			<span class="tips">{{$t('order.delivery-info')}}</span>
			<view class="txt_btn">
				<view class="tit">
					<view class="txt_left">{{$t('order.delivery-people')}} :</view>
					<view class="">{{list.realName}}</view>
				</view>
				<!-- <button type="primary" size="mini">复制</button> -->
			</view>

			<view class="tit">
				<view class="txt_left">{{$t('order.contact')}} :</view>
				<view class="">{{list.userPhone}}</view>
			</view>
			<view class="tit">
				<view class="txt_left">{{$t('order.delivery-addr')}} :</view>
				<view class="">{{list.userAddress}}</view>
			</view>
		</view>

		<!-- <view class="card_detail">
			<span>支付方式</span>
			<view class="txt_btn">
				<view class="tit">
					<view class="txt_left">收款网络 :</view>
					<view class="">12312313</view>
				</view>
				<button type="primary" size="mini">复制</button>
			</view>

			<view class="tit">
				<view class="txt_left">钱包地址 :</view>
				<view class="">12312313</view>
			</view>
			<view class="tit">
				<view class="txt_left">钱包二维码 :</view>
				<view class="pay_img">
					<img src="" alt="" />
				</view>
			</view>
		</view> -->




		<!-- 	<view class="bottom">
			
			<view class="bottom_btn">
				<button type="primary" class="btn" @click="upload">上传凭证</button>
				<button type="warn" class="btn">立即支付</button>
			</view>
		</view> -->

		<u-popup v-model="show" mode="bottom" :mask=false>
			<view class="upload_tit">{{$t('order.commit.voucher')}}</view>
			<view class="upload_Box">
				<view class="">{{$t('order.upload-voucher')}}</view>
				<view class="">
					<u-upload :action="action" :mask-close-able="false" :mask=false :max-count="5"
						:file-list="fileList"></u-upload>
				</view>
			</view>

			<u-button>{{$t('order.commit.go')}}</u-button>
		</u-popup>

	</view>
</template>

<script>
	import {
		OrderInfo,
		orderDetail
	} from '@/api/new.js'
	export default {
		data() {
			return {
				shopInfo: '',
				info: "",
				list: {},
				successInfo: 1,
				show: false,
				action: 'http://www.example.com/upload',
				fileList: [{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}]
			}
		},
		onLoad(e) {
			this.shopInfo = e.orderInfo
			console.log(e);

			this.shopDetail(e)

			// this.getInfo()

		},
		methods: {
			shopDetail(e) {
				let that = this
				let ch = uni.getStorageSync('AppLocale').code
				orderDetail(e.orderInfo).then(res => {
					console.log(res, 'res');
					this.list = res.data
					if (this.list.storeName) {


						if (this.list.storeName.includes('|')) {
							if (ch == "en") {
								this.list.storeName = this.list.storeName.split('|')[0]
							} else {
								this.list.storeName = this.list.storeName.split('|')[1]
							}
						}
					}


				}).catch(err => {

					that.$util.Tips({
						title: this.$t("auctionTips.2007")
					});
				})
			},
			getInfo() {
				// OrderInfo(this.orderInfo).then(res => {
				// 	console.log(res, 'res');
				// 	if (res.code == 200) {
				// 		this.list = res.data
				// 	}

				// }).catch(err => {
				// 	this.$util.Tips({
				// 		title: err
				// 	});
				// })

			},
			copy() {
				let that = this
				uni.setClipboardData({
					data: that.list.orderId,
					success() {
						that.$util.Tips({
							title: this.$t("public.tips.copy")
						})
					}
				})


			},
			upload() {
				this.show = true
			},
			detail(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	.upload_tit {
		text-align: center;
		margin: 10px 0;
		font-size: 18px;
		padding: 10px 0;
		border-bottom: 1px solid #ccc;
		font-weight: bold;
	}

	.upload_Box {
		padding: 10px;
		display: flex;
	}

	::v-deep uni-modal .uni-modal {
		z-index: 99999999 !important;
	}

	.bottom {

		position: absolute;
		bottom: 10px;
		display: flex;
		/* height: 50px; */
		padding: 20px 0;
		width: 100%;
		background: #fff;
	}

	.bottom_btn {
		display: flex;
		justify-content: end;
		width: 100%;
		padding: 0 10px;
		height: 30px;

		.btn {
			height: 35px;
			padding: 5px 10px;
			margin-left: 15px;
		}
	}

	.txt_left {
		margin-right: 5px;
	}

	.txt_btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.actually {
		display: flex;
		justify-content: flex-end;
	}

	.title {
		display: flex;
		justify-content: space-between;
		margin-left: 10px;
		flex: 1
	}

	.name {
		font-weight: 700;
		font-size: 19px
	}

	.price {
		color: #d9001b;
		font-weight: 700;
		font-size: 19px
	}

	.image {
		height: 150px;
		width: 150px;
		/* background: aqua; */

	}

	.info {
		margin: 10px;
		padding: 10px 16px;
		background-color: #fff;
		border-radius: 8px;
		/* height: 250px; */
		display: flex;
		flex-direction: column;
		justify-content: space-around
	}

	.info_box {
		display: flex;
		justify-content: space-between;
		flex: 1
	}

	.img {
		/* background-color: aqua; */
		width: 56px;
		height: 40px;
		margin-right: 10px;
	}

	.card {
		margin: 10px;
		padding: 10px 16px;
		background-color: #fff;
		border-radius: 8px;
	}

	.line {
		padding: 10px;
		display: flex;

	}

	.num {
		font-weight: bold;
	}

	.card_detail {
		margin: 20px 10px;
		padding: 10px 10px;
		/* height: 200px; */
		background-color: #fff;
		border-radius: 8px;

		.tips {
			font-size: 18px;
			font-weight: bold;
		}
	}

	.tit {
		display: flex;
		/* justify-content: space-between; */
		margin: 10px 0;

	}
</style>